<template>
  <div class="report-main">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="report-search">
      <div class="report-search-box">
        <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
          <path :d="svgPath.closeFullScreen"/>
        </svg>
        <single-list-filter-without-cb v-if="showInsuranceType"
                                       :filter="filterN"
                                       :type="'socialInsurance'"
                                       :leftTipText="'险种'"
                                       @confirmSingleSelect="confirmSingleSelectSocialInsurance">
        </single-list-filter-without-cb>
        <year-month :filter="filterN"
                    ref="yearMonth"
                    @getYearAndMonth="getYearAndMonth"
                    :pageChange="pageChange">
        </year-month>
        <a class="import-excel-text" :href="downloadHref"
           download="exportTownWorksBasicMedicareExcel">导出</a>
      </div>
    </div>
    <div class="report-container report-wrapper">
      <!--<div id="report-loading" class="report-loading" :style="{width:loadingWidth + 'px',background:'#1b2b44'}" v-show="showLoading"></div>-->
      <div id="report-loading" class="report-loading"  v-show="showLoading"></div>
      <h3 class="report-title">
        {{title}}
      </h3>
      <div class="report-box" :class="hideIncrease?'report-box1':'report-box2'">
        <span class="report-unit">单位：万元</span>
        <table style="min-height:448px">
          <thead>
          <tr>
            <th rowspan="3">单位</th>
            <th :colspan="hideIncrease?'9':'8'">基金征缴完成情况</th>
          </tr>
          <tr>
            <th rowspan="2">当期征缴收入</th>
            <th :colspan="hideIncrease?'3':'2'">征缴收入同比</th>
            <th colspan="2">征缴率</th>
            <th colspan="2">目标进度</th>
            <th rowspan="2">排名</th>
          </tr>
          <tr>
            <th>上年同期</th>
            <th>同比增减</th>
            <th v-show="hideIncrease">增幅</th>
            <th>征缴计划</th>
            <th>征缴率</th>
            <th>征缴目标</th>
            <th>完成比例</th>
          </tr>
          </thead>
          <tbody>
          <tr class="reportTotal">
            <td style="color:#fff;">{{all.name}}</td>
            <td>{{all.dangQiNum}}</td>
            <td>{{all.samePeriod}}</td>
            <td>{{all.incDecrea}}</td>
            <td v-show="hideIncrease">{{all.increase}}</td>
            <td>{{all.colPlan}}</td>
            <td>{{all.colRate}}</td>
            <td>{{all.newTask}}</td>
            <td>{{all.completionRate}}</td>
            <td></td>
          </tr>
          <tr v-for="(item,index) in reportData">
            <td>{{item.name}}</td>
            <td class="report-red">{{item.dangQiNum}}</td>
            <td>{{item.samePeriod}}</td>
            <td>{{item.incDecrea}}</td>
            <td v-show="hideIncrease">{{item.increase}}</td>
            <td>{{item.colPlan}}</td>
            <td>{{item.colRate}}</td>
            <td class="report-red edit-box" @mouseenter="showEdit(index)" @mouseleave="hideEdit">
              <input type="text" v-model="item.newTask" @blur="hideBlur($event,index,item.areaId)" maxlength="15"
                     v-focus="editableIndex==index" v-blur="editableIndex==-1"
                     :readonly="editableIndex==index?false:true" @keydown="onlyNum($event)">
              <svg @click="chooseEdit(index)" class="edit-btn" v-show="editIndex==index" viewBox="0 0 1024 1024">
                <path :d="svgPath.editBtn1"/>
                <path :d="svgPath.editBtn2"/>
              </svg>
            </td>
            <td>{{item.completionRate}}</td>
            <td>{{item.rank}}</td>
          </tr>
          </tbody>
        </table>
        <div class="report-remind">
          <span class="report-remind-left">注：</span>
          <div class="report-remind-right">
            <p v-for="(item,index) in conclusion" v-html="item"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {svgPath, quitFullScreen, getRankingData, fifteenNumReg, loadingOpt} from "../../assets/js/utils";
  import SingleListFilterWithoutCb from '../last/filter/single-list-filter-without-checkbox.vue'
  import {getSearchItems, getFiveRisksIncome, setEditNum, getFiveRisksExportExcel} from '../../api/api'
  import YearMonth from '../view/year-month.vue'
  import {getDefaultYear} from '../last/chart/utils/dataUtils'

  export default {
    props: ['isChange', 'fullScreen', 'pageChange'],
    components: {
      YearMonth,
      SingleListFilterWithoutCb
    },
    data () {
      return {
        showLoading: true,
        title: '城镇职工基本养老保险基金收入及征缴计划完成情况',
        insuranceType: 1001,
        download: false,
        downloadHref: 'javascript:;',
        canShow: true,
        filterN: null,
        queryYear: '',
        svgPath: svgPath,
        editIndex: -1,
        editableIndex: -1,
        all: {},
        reportData: [],
        originData: '',
        reportNumber: '',
        conclusion: [],
        hideIncrease: true,
        showInsuranceType: false,
        loadingWidth: 1336,
      }
    },
    // 自定义指令
    directives: {
      focus: {
        update: function (el, {value}) {
          if (value) {
            el.focus()
          }
        }
      },
      blur: {
        update: function (el, {value}) {
          if (value) {
            el.blur()
          }
        }
      },
      cli: {
        update: function (el, {value}) {
          if (value) {
            el.click()
          }
        }
      }
    },
    watch: {
      isChange () {
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }

        setTimeout(() => {
          if (document.querySelector('.report-container')) {
            let tempWidth = document.querySelector('.report-container').clientWidth;
            this.loadingWidth = tempWidth;
          }
        }, 100);
      },
      pageChange () {
        console.log(1121212121)
        this.getInsuranceType(this.$route.params.id);
        let val = this.$route.params.id;
        if (val == 1003 || val == 1004 || val == 1005) {
          this.hideIncrease = false;
        } else {
          this.hideIncrease = true;
        }
      },
      insuranceType (val) {
        if (val == 1003 || val == 1004 || val == 1005) {
          this.hideIncrease = false;
        } else {
          this.hideIncrease = true;
        }
      }
    },
    mounted () {
      this.myChart = this.$echarts.init(document.getElementById('report-loading'), null, {renderer: 'canvas'})
      //给echart 加loading效果
      this.myChart.showLoading(loadingOpt)
      let that = this;
      let id = this.$route.params.id;
      //获取筛选数据
      this.getInsuranceType(id)
    },
    methods: {
      //获取筛选数据
      getInsuranceType (insuranceType) {
        insuranceType = insuranceType || 1000;
        getSearchItems('init/initInput').then((res) => {
          if (res.code == 0) {
            this.filterN = res.data;
            if (insuranceType == 1000) {
              this.showInsuranceType = true;
              this.insuranceType = res.data.nc.insuranceTypes[0].selectId
            } else {
              this.showInsuranceType = false;
              this.insuranceType = insuranceType;
            }
            this.queryYear = getDefaultYear(this.filterN)
            this.$refs.yearMonth.setDefaultMonthAndPosition(this.queryYear)
          }
        })
      },
      onlyNum (event) {
        if (event.keyCode == 190) {
        } else {
          if (!(event.keyCode == 46) && !(event.keyCode == 8) && !(event.keyCode == 37) && !(event.keyCode == 39))
            if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)))
              event.returnValue = false;
        }
      },
      getData () {
          getFiveRisksIncome('insuFund/endInsu', this.queryYear, this.month, this.insuranceType)
            .then(res => {
              if (res.code == 0) {
                this.showLoading = false;
                this.myChart.hideLoading()
                this.all = res.data.all;
                this.reportData = res.data.reportData;
                this.originData = JSON.stringify(this.reportData);
                getRankingData(this, this.reportData);
                this.title = res.data.reportName;
                this.reportNumber = res.data.reportNumber;
                this.conclusion = res.data.conclusion;
                this.importExcelReport();
                let space = '&nbsp;&nbsp;&nbsp;&nbsp;'
                if (this.insuranceType == 1001) {
                  this.conclusion = [`1、省下目标${this.all.newTask ? this.all.newTask : space}万元；`, `2、${this.queryYear}年${this.month}月应完成${this.all.colPlan ? this.all.colPlan : space}万元，财务征缴完成${this.all.dangQiNum ? this.all.dangQiNum : space}万元，完成省下目标的${this.all.completionRate ? this.all.completionRate : '  %'}；`, `3、当期征缴收入未扣减复息、滞纳金收入。`]
                } else {
                  this.conclusion = [`1、省下目标${this.all.newTask ? this.all.newTask : space}万元；`, `2、${this.queryYear}年${this.month}月应完成${this.all.colPlan ? this.all.colPlan : space}万元，财务征缴完成${this.all.dangQiNum ? this.all.dangQiNum : space}万元，完成省下目标的${this.all.completionRate ? this.all.completionRate : '  %'}；`]
                }
              }
            })
      },
      importExcelReport () {
        let rank = [];
        this.idArr.map((item, index) => {
          let arr = '';
          if (this.rankArr[index]) {
            arr = `${item}-${this.rankArr[index]}`
          } else {
            arr = `${item}-`
          }
          rank.push(arr);
        })
        let url = getFiveRisksExportExcel('insuFund/exportExcel', this.queryYear, this.month, this.insuranceType, rank);
        this.downloadHref = url;
      },
      closeAll () {
        quitFullScreen();
      },
      showEdit (index) {
        this.editIndex = index;
      },
      hideEdit () {
        this.editIndex = -1;
        this.editableIndex = -1;
      },
      chooseEdit (index) {
        this.editableIndex = index;
        this.editIndex = -1;
      },
      hideBlur (e, index, id) {
        let val = e.target.value;
        let oldVal = oldVal = JSON.parse(this.originData)[index].newTask;
        ;
        if (val == oldVal) {
          //do nothing
        } else if (val == '' || fifteenNumReg(val)) {
          //发送
          let totalArr = [];
          this.reportData[index].newTask = val;
          this.reportData.map((item, index) => {
            totalArr.push(item.newTask);
          })
          this.all.newTask = totalArr.reduce((n, m) => (Number(n) + Number(m)).toFixed(2));
          this.all.completionRate = Math.round((this.all.dangQiNum / this.all.newTask).toFixed(4) * 10000) / 100 + '%';
          this.originData = JSON.stringify(this.reportData);
          getRankingData(this)
          setEditNum('report/yearTargetSetUp', this.reportNumber, this.queryYear, id, val).then(res => {
            if (res.code == 0) {
              let space = '&nbsp;&nbsp;&nbsp;&nbsp;'
              if (this.insuranceType == 1001) {
                this.conclusion = [`1、省下目标${this.all.newTask ? this.all.newTask : '&nbsp;&nbsp;&nbsp;&nbsp;'}万元；`, `2、${this.queryYear}年${this.month}月应完成${this.all.colPlan ? this.all.colPlan : space}万元，财务征缴完成${this.all.dangQiNum ? this.all.dangQiNum : space}万元，完成省下目标的${this.all.completionRate ? this.all.completionRate : '  %'}；`, `3、当期征缴收入未扣减复息、滞纳金收入。`]
              } else {
                this.conclusion = [`1、省下目标${this.all.newTask ? this.all.newTask : space}万元；`, `2、${this.queryYear}年${this.month}月应完成${this.all.colPlan ? this.all.colPlan : space}万元，财务征缴完成${this.all.dangQiNum ? this.all.dangQiNum : space}万元，完成省下目标的${this.all.completionRate ? this.all.completionRate : '  %'}；`]
              }
            }
          })
          // this.getData()
          this.importExcelReport();
        } else {
          this.$message({
            message: '只允许输入正数（包括小数点后2位）',
            center: true,
            type: 'info',
          });
          this.reportData = JSON.parse(this.originData);
          getRankingData(this)
        }
      },
      getYearAndMonth (year, month, yearMonth) {
        // console.log( year + '  ' + month + " " + yearMonth)
        this.queryYear = year;
        this.month = month;
        this.yearMonth = yearMonth;
        this.showLoading = true;
        this.myChart.showLoading(loadingOpt)
        this.getData()
      },
      confirmSingleSelectSocialInsurance (filter) {
        this.insuranceType = filter;
        this.showLoading = true;
        this.myChart.showLoading(loadingOpt);
        this.getData(2)
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/css/report.css";

  .report-box1 table th, .report-box1 table td {
    width: 10%;
  }

  .report-box2 table th, .report-box2 table td {
    width: 11.11%;
  }
</style>
